<template>
	<div class="table-wrapper">
		<table ref="table">
			<!-- 表头 -->
			<thead>
				<tr>
					<th v-if="index">#</th>
					<!-- <th v-for="(item, i) in header" :key="i" :width="columnWidth[i]"> -->
					<th v-for="(item, i) in header" :key="i">
						{{ item }}
					</th>
				</tr>
			</thead>

			<!-- 表格内容，包括固定行 -->
			<tbody>
				<!-- 固定行 -->
				<tr class="fixed_row">
					<td v-if="index"></td>
					<td v-for="(item, i) in fixedRow" :key="i">
						{{ item }}
					</td>
				</tr>

				<!-- 数据行 -->
				<tr v-for="(row, i) in formattedData" :key="i" @click="handleClick(row,i)" @mouseover="hoverRow(i)"
					@mouseout="leaveRow">
					<td v-if="index">{{ i + 1 }}</td>
					<td v-for="(cell, j) in row" :key="j" :align="align[j]">
						{{ cell }}
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>


<script setup>
import { ref } from "vue";

const props = defineProps({
	header: {
			type: Array,
			default: () => ["项目名", "总活跃度", "总issue", "总PR", "CSI"],
		},
		index: {
			type: Boolean,
			default: true,
		},
		// columnWidth: {
		// 	type: Array,
		// 	default: () => ["10%", "20%","20%", "20%", "20%","20%"],
		// },
		align: {
			type: Array,
			default: () => ["center", "center", "center", "center", "center"],
		},    
		data: {
      		type: Array,
      		required: true,
			  default: () => ({ data: { top100_items: [] } }),
    	}
})
const emits =defineEmits(['tableDataChange'])
const fixedRow = ref(["请选择项目", "", "", "",""]);

    // 处理数据并格式化
    const formattedData = ref(props.data.slice(1,101).map((item) => [
      item.item, // 项目名
	  Math.floor(parseFloat(item.activity)), // 总活跃度，去掉小数部分
 	  Math.floor(parseFloat(item.issue_comments)), // 总Issue Comments，去掉小数部分
  	  Math.floor(parseFloat(item.change_requests)), // 总Change Requests，去掉小数部分
      item.CSI, // CSI
    ]));
		const handleClick =async (row,index) => {
			fixedRow.value = formattedData.value[index];
			emits('tableDataChange',row[0])
		};

		const hoverRow = (index) => {
			// 鼠标悬浮事件（可自定义逻辑）
			console.log(`Hovered row: ${index+1}`);
		};

		const leaveRow = () => {
			// 鼠标移出事件（可自定义逻辑）
		};
// export default {
// 	name: "BigScrollTable",
// 	props: {
// 		header: {
// 			type: Array,
// 			default: () => ["项目名", "总活跃度", "总issue", "总PR", "CSI"],
// 		},
// 		index: {
// 			type: Boolean,
// 			default: true,
// 		},
// 		// columnWidth: {
// 		// 	type: Array,
// 		// 	default: () => ["10%", "20%","20%", "20%", "20%","20%"],
// 		// },
// 		align: {
// 			type: Array,
// 			default: () => ["center", "center", "center", "center", "center"],
// 		},    
// 		data: {
//       		type: Array,
//       		required: true,
// 			  default: () => ({ data: { top100_items: [] } }),
//     	}
// 	},
// 	emits:['tableDataChange'],
// 	setup(props) {
// 		const fixedRow = ref(["请选择项目", "", "", "",""]);

//     // 处理数据并格式化
//     const formattedData = ref(props.data.slice(1,101).map((item) => [
//       item.item, // 项目名
// 	  Math.floor(parseFloat(item.activity)), // 总活跃度，去掉小数部分
//  	  Math.floor(parseFloat(item.issue_comments)), // 总Issue Comments，去掉小数部分
//   	  Math.floor(parseFloat(item.change_requests)), // 总Change Requests，去掉小数部分
//       item.CSI, // CSI
//     ]));
// 		const handleClick =async (row,index) => {
// 			fixedRow.value = formattedData.value[index];
// 			emits('tableDataChange')
// 			const result =await getTableData()
// 			console.log(result);
// 		};

// 		const hoverRow = (index) => {
// 			// 鼠标悬浮事件（可自定义逻辑）
// 			console.log(`Hovered row: ${index+1}`);
// 		};

// 		const leaveRow = () => {
// 			// 鼠标移出事件（可自定义逻辑）
// 		};

// 		return {
// 			formattedData,
//       		fixedRow,
//       		handleClick,
//       		hoverRow,
//       		leaveRow,
// 		};
// 	},
// };
</script>

<style scoped>
.table-wrapper {
	width: 38vw;
	/* 宽度为屏幕的1/3 */
	height: 43vh;
	/* 高度为屏幕的1/2 */
	background: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 10px;
	overflow-y: auto;
	/* 右侧滚动条 */
	color: #fff;
}

table {
	width: 100%;
	border-collapse: collapse;
	color: white;
}

th,
td {
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

th {
	background: rgba(24, 81, 194, 0.97);
	color: white;
}

.fixed_row {
	background: rgba(61, 107, 194, 0.85);
	font-weight: bold;
}

tr:hover {
	background-color: rgba(0, 123, 255, 0.6);
}

/* 自定义滚动条样式 */
.table-wrapper::-webkit-scrollbar {
	width: 8px;
}

.table-wrapper::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}
</style>